<template>
  <div id="custom-table1">
    <!-- <div class="left-content">
      <org-tree :show-add="true" :check-auth="true" :can-hide="true" @node-click="treeNodeClick" @add-click="addClick" @tree-show-hide="treeShowHide"/>
    </div> -->
    
    <el-button @click="handleExport">导出</el-button>
    <export-files 
        v-if="exportisible"
        title="导出标题" 
        :visible.sync="exportisible"
        download-url="https://qup2dev.quanyou.com.cn/ucenter/api"
        :config="exportConfig"
        @success="refreshTable(true)"
      />
    <el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first">
      用户管理
      <el-button @click="handleToggleAllSelection">切换多选</el-button>
      <table-box ref="tableRefs"
        table-size="small"
        default-search="userType"
        :table-config="tableConfig" 
        :table-height="200"
        :other-raw="{id:12}" 
        :selected-arry.sync="tableSelected" 
        :table-span-method="tableSpanMethod"
        :auto-scroll="false"
        :show-header="true"
        :border="false"
        show-selection
        show-index
        dragable
        :show-page="true"
        :click-row-selection="true"
        :show-custom-setting="false"
        :show-custom-combine="true"
        :show-custom-collect="true"
        @edit-change="editChange" 
        @row-click="rowClickHandel"
        @selection-change="selectionChangeHandel"
        @picklist-click="pickListClick" 
        @btnOperate="btnOperate"
        @search-change="searchChangeHandle"
        @search-field-change="seachFieldChangeHandle">
        <span slot="table-before">这是在表格前，功能区后</span>
        <span slot="table-after">这是在表格后，分页前</span>
        <span slot="setting-before">setting置前</span>
        <span slot="outerbtn-before">outerbtn前</span>
        <span slot="combine-before">combine前</span>
      </table-box>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">
      配置管理
      <table-box ref="tableRefs22"
        table-size="mini"
        default-search="userType"
        :table-config="tableConfig" 
        :table-height="200"
        :other-raw="{id:12}" 
        :selected-arry.sync="tableSelected" 
        :auto-scroll="false"
        :table-span-method="tableSpanMethod"
        show-selection
        show-index
        dragable
        :show-page="true"
        :click-row-selection="true"
        :show-custom-setting="true"
        :show-custom-combine="true"
        :show-custom-collect="true"
        @edit-change="editChange" 
        @row-click="rowClickHandel"
        @selection-change="selectionChangeHandel"
        @picklist-click="pickListClick" 
        @btnOperate="btnOperate"></table-box>
    </el-tab-pane>
  </el-tabs>

    <div class="right-content">
      <table-box ref="tableRefs33"
        table-size="small"
        default-search="userType"
        :table-config="tableConfig" 
        :other-raw="{id:12}" 
        :selected-arry.sync="tableSelected" 
        :auto-scroll="false" 
        :off-set="80"
        :table-span-method="tableSpanMethod"
        show-selection
        show-index
        dragable
        :combine-auto-request="true"
        :show-page="true"
        :click-row-selection="true"
        :show-custom-setting="true"
        :show-custom-combine="true"
        :show-custom-collect="true"
        @edit-change="editChange" 
        @row-click="rowClickHandel"
        @selection-change="selectionChangeHandel"
        @picklist-click="pickListClick" 
        @combine-change="combineChange"
        @btnOperate="btnOperate">
        <!-- <el-table-column prop="createTime" label="姓名" width="240">
          <template slot-scope="scope">
            <el-input v-model="scope.row.createTime" placeholder="请输入内容"></el-input>
            <el-date-picker v-model="scope.row.createTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"> </el-date-picker>
          </template>
        </el-table-column> -->
        <!-- <el-table-column slot="before" type="selection" width="50" /> -->
        <el-table-column prop="staffCode" label="员工编号" width="240" show-overflow-tooltip />
      </table-box>
    </div>
    
    <div>
      使用不通过接口获取的数据
      <table-box ref="tableRefs2"
        table-size="mini"
        :data="tableData"
        :table-config="tableConfig2" 
        :other-raw="{id:12}" 
        :selected-arry.sync="tableSelected" 
        :auto-scroll="false" 
        :table-max-height="460"
        :table-span-method="tableSpanMethod"
        dragable
        :border="true"
        @edit-change="editChange"
        @selection-change="selectionChangeHandel"
        @picklist-click="pickListClick" 
        @btnOperate="btnOperate">
        
        <el-table-column slot="before" type="selection" width="40" fixed="left" :selectable="(row,index)=>{return index<2}" :show-overflow-tooltip="false" />
        <el-table-column slot="before" label="行号" type="index" width="50" />
      </table-box>
        <!-- show-selection
        show-index -->
    </div>

    无setting 的表格
    <div>
      <table-box ref="tableRefs3"
        table-size="mini"
        default-search="userType"
        :table-config="tableConfig3"
        :other-raw="{id:12}" 
        :selected-arry.sync="tableSelected" 
        :auto-scroll="false" 
        :table-height="480"
        :show-selection="true"
        show-summary
        :summary-method="getSummaries"
        show-index
        dragable
        :show-page="true"
        :click-row-selection="true"
        @edit-change="editChange" 
        @row-click="rowClickHandel"
        @selection-change="selectionChangeHandel"
        @picklist-click="pickListClick"
        @btnOperate="btnOperate">
          <el-table-column prop="userType" label="用户类型" width="120"></el-table-column>
          <el-table-column prop="passwordValidWay" label="密码效验方式" width="120"></el-table-column>
          <el-table-column prop="account" label="用户名" width="120"></el-table-column>
          <el-table-column prop="userName" label="用户姓名" width="120"></el-table-column>
          <el-table-column prop="staffCode" label="员工编号" width="120"></el-table-column>
          <el-table-column prop="gender" label="性别" width="120"></el-table-column>
          <el-table-column prop="age" label="性别" width="120"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="120"></el-table-column>
          <el-table-column prop="phone" label="电话" width="120"></el-table-column>
          <el-table-column prop="state" label="状态" width="120"></el-table-column>
      </table-box>
        <!-- show-selection
        show-index -->
    </div>

  </div>
</template>

<script>
  export default {
    name: 'CustomTable',
    components: {},
    filters: {},
    props: {},
    data() {
      return {
        exportConfig:[],
        exportisible:false,
        showLogs: false,
        tableSelected: [],
        tableConfig: {
          interfacePath: 'https://qup2dev.quanyou.com.cn/ucenter/api/v2/user/page',
          tabIndex: 100,
          hideSearchBar:false,// 隐藏搜索，组合查询
          onlySearchBar:false, // 仅显示搜索框
          hideFuncBar:false, // 隐藏整个搜索查询按钮功能区
          onlySettingBtn:false,//是否只显示表格设置
          pageSize: 5,
          tablePage:[5,10,30,50,100],
          sort:'createTime',
          order:'desc',
          setting: [
            {
              prop: 'userType',
              label: '用户类型',
              minWidth: 120,
              type: 'select',
              /* propEnum: {
                domainCode: 'platform',
                appCode: 'ucenter',
                dictTypeCode: 'QUP_CUSTOMER_TYPE'
              } */
              
              propEnum: {
                domainCode: 'platform',
                appCode: 'mcenter',
                dictTypeCode: 'ARTICLE_CATEGORY'
              }
            },
            /* {
              prop: 'coverUrl',
              label: '封面图',
              minWidth: 100,
              overflowHidden: false,
              sortable: false,
              type: 'hidden',
              align: 'center',
              render: (_h, row) => {
                return (<div class='cate_img'><img src='https://filedev.quanyou.com.cn/marketing/group1/M00/00/4D/rB8kPmHfxf2AfYa0AAGGOYiZE4k96.jpeg' style='height:80px' /></div>)
              }
            }, */
            {
              prop: 'passwordValidWay',
              label: '密码效验方式',
              minWidth: 130,
              type: 'select',
              propEnum: {
                domainCode: 'platform',
                appCode: 'ucenter',
                dictTypeCode: 'PASSWORD_VERIFIERS_TYPE'
              }
            },
            {
              prop: 'checkVal',
              label: '复选框',
              minWidth: 120,
              edit:{
                editType:'checkbox',
                selectData:[
                  {label:'ckb1',value:'1'}
                ]
              },
              render:(h,rows)=>{
                if(rows.gender){
                  return (
                    <el-checkbox v-model="rows.gender" checked disabeld></el-checkbox>
                    )
                }else{
                  return (
                    <el-checkbox v-model="rows.gender" disabeld></el-checkbox>
                    )
                }
              }
            },
            {
              prop: 'account',
              label: '用户名',
              minWidth: 120,
              className: 'btn-green',
              isButton: true,
              isTrim:false,
              clickFun: ()=>{
                  console.log('点击了')
                }
            },
            {
              prop: 'userName',
              label: '用户姓名',
              columnKey: 'userName',
              width: '120',
              edit: {
                canEdit: true,
                editType: 'picklist',
                disabled:(row)=>{
                  return row.gender==0
                }
              }
            },
            {
              prop: 'staffCode',
              label: '员工编号',
              columnKey: 'userId',
              minWidth: '100',
              hidden:true
            },
            {
              prop: 'gender',
              label: '性别',
              type: 'select',
              width: '80',
              propEnum: {
                domainCode: 'platform',
                appCode: 'ucenter',
                dictTypeCode:'QUP_SEX_TYPE'
              },
              formatData: function(data) {
                 return Number(data.gender) === 1 ? '男' : '女' 
              }
            },
            {
              prop: 'age',
              label: '年龄',
              minWidth: 120,
              required:true,
              edit:{
                canEdit:true,
                editType:'number',
                minNumber:(row)=>{
                  return 16
                },
                maxNumber:(row)=>{
                  return 20
                },
              }
            },
            {
              prop: 'email',
              label: '邮箱',
              width: '150',
              required:true,
              edit: {
                canEdit: true,
                editType: 'text',
                filterable: true,
                remote: true,
                remoteUrl: '/ucenter/api/user/ad',
                paramField: 'account',
                defaultProps: {
                  label: 'name',
                  value: 'userId'
                }
              }
            },
            {
              prop: 'phone',
              label: '电话',
              width: '100',
              required:true,
              render: function(_, rows) {
                const {phone} = rows
                return (<div><span>{phone}</span></div>)
              }
            },
            {
              prop: 'state',
              label: '状态',
              width: '180',
              type: 'select',
              propEnum: {
                domainCode: 'platform',
                appCode: 'ucenter',
                dictTypeCode: 'QUP_USER_STATE'
              },
              edit: {
                canEdit: true,
                editType: 'select',
                /* selectData:[
                    {label:'启用',value:1},
                    {label:'停用',value:0}
                  ], */
                selectData:(row)=>{
                  return [
                    {label:'启用1',value:1},
                    {label:'停用0',value:0}
                  ]
                }
              }
            },
            {
              prop: 'idNumber',
              label: '身份证号',
              minWidth: 150,
              type:'batch',
              show:false
            },
            {
              prop: 'source',
              label: '来源',
              minWidth: 150,
              edit: {
                editCondition: (row)=>{
                  // console.log(row)
                  return row.userName && row.userName.indexOf('小茜')>-1
                },
                editType: 'select',
                selectData:(row)=>{
                  return [
                    {label:'TOP',value:'TOP'},
                    {label:'UAC',value:'UAC'}
                  ]
                }
              },
              /* formatData:(row)=>{
                return row.source === 'TOP' ? 'TOP1':'UAC2'
              } */
            },
            {
              prop: 'lastLoginTime',
              label: '最后登录时间',
              minWidth: '160',
              type: 'date',
              edit: {
                canEdit: true,
                editType: 'date'
              }
            },
            {
              prop: 'createBy',
              label: '创建人',
              width: '120'
            },
            {
              prop: 'createTime',
              label: '创建时间',
              minWidth: '160',
              type: 'date'
            }
          ],
          btnList:[
            {
              buttonName: '权限按钮1',
              optCode: 'test1',
              outerFlag: true
            },
            {
              buttonName: '权限按钮2',
              optCode: 'test1',
              outerFlag: true
            }
          ]
        },
        tableData:[
          {id:1,userType:1,},
          {id:2,userType:2,},
          {id:3,userType:3,},
          {id:4,userType:4,},
          {id:5,userType:5,},
          {id:6,userType:6,}
        ],
        activeName:'first',
        tableConfig2: {
          tabIndex: 1,
          hideSearchBar:false,//
          pageSize: 5,
          tablePage:[5,10,30,50,100],
          setting: [
            {
              prop: 'userType',
              label: '用户类型',
              minWidth: 120,
              editable:true,
              type: 'select',
              propEnum: {
                domainCode: 'platform',
                appCode: 'ucenter',
                dictTypeCode: 'QUP_CUSTOMER_TYPE'
              }
            },
            {
              prop: 'passwordValidWay',
              label: '密码效验方式',
              minWidth: 130,
              type: 'select',
              propEnum: {
                domainCode: 'platform',
                appCode: 'ucenter',
                dictTypeCode: 'PASSWORD_VERIFIERS_TYPE'
              }
            },
            {
              prop: 'account',
              label: '用户名',
              minWidth: 120,
            },
            {
              prop: 'isLizi',
              label: '是否离职',
              minWidth: 120,
              edit:{
                editType:'checkbox',
                selectData:[
                  {label:'',value:1}
                ]
              }
            },
            {
              prop: 'checkVal',
              label: '复选框',
              minWidth: 120,
              edit:{
                editType:'checkbox',
                selectData:[
                  {label:'ckb1',value:'1'},
                  {label:'ckb2',value:'2'},
                  {label:'ckb3',value:'3'},
                ]
              }
            },
            {
              prop: 'radioVal',
              label: '单选框',
              minWidth: 120,
              edit:{
                editType:'radio',
                selectData:[
                  {label:'radio1',value:'1'},
                  {label:'radio2',value:'2'},
                  {label:'radio3',value:'3'},
                ]
              }
            },
            {
              prop: 'userName',
              label: '用户姓名',
              columnKey: 'userName',
              width: '120',
              edit: {
                canEdit: true,
                editType: 'picklist'
              }
            },
            {
              prop: 'staffCode',
              label: '员工编号',
              columnKey: 'userId',
              width: '100',
              show:false
            },
            {
              prop: 'gender',
              label: '性别',
              type: 'select',
              width: '80',
              propEnum: {
                domainCode: 'platform',
                appCode: 'ucenter',
                dictTypeCode:'QUP_SEX_TYPE'
              },
              formatData: function(data) { return Number(data.gender) === 1 ? '男' : '女' }
            },
          ],
          btnList:[
            {
              buttonName: '权限按钮11',
              optCode: 'test1',
              outerFlag: true
            },
            {
              buttonName: '权限按钮22',
              optCode: 'test1',
              outerFlag: true
            }
          ]
        },
        tableConfig3:{
          interfacePath: 'https://qup2dev.quanyou.com.cn/ucenter/api/v2/user/page',
          tabIndex:1,
          hideSearchBar:false,// 隐藏搜索，组合查询
          onlySearchBar:false, // 仅显示搜索框
          hideFuncBar:false, // 隐藏整个搜索查询按钮功能区
          onlySettingBtn:false,//是否只显示表格设置
          pageSize: 5,
          tablePage:[5,10,30,50,100],
          btnList:[], 
        },
        searchConfig:[
          { label: '订单号', prop: 'ordercode', type: 'text', value: '', placeholder: '', filter: true }
        ],
        otherFilters:[{'id':'wholesaleStandardId','property':'wholesaleStandardId','value':'670d267c-1675-43eb-8d26-7c1675d3eb29','operator':'='}],
      }
    },
    computed: {},
    watch: {},
    created(){
      this.exportConfig =[{
            code: 'price_code',
            name: '价格明细',
            async: false, // 是否异步
            templateCode:'',// 模板code
            dataApi: `http://price-center.itdev2.quanyou.com.cn/api/v1/excel/export`, // 价格明细导出
            filtersRaw:[], // 导出符合条件的数据(当前搜索结果的数据)
            selectedRows:[],//当前所选中的数据航
            queryField:'userId'//指定行导出的字段名称
          }
        ]
    },
    methods:{
      handleExport(){
        this.exportisible = true
        let config = this.exportConfig[0]
        // config.filtersRaw = [{'id':'wholesaleStandardId','property':'wholesaleStandardId','value':'670d267c-1675-43eb-8d26-7c1675d3eb29','operator':'='}]
        config.filtersRaw = this.otherFilters
        config.selectedRows = this.tableSelected
        this.$set(this.exportConfig,0,config)
        // console.log(this.exportConfig)
        // setTimeout(() => {
        //   this.exportisible = true
        // }, 1000);
      },
      handleSearch(data) {
        this.otherFilters = [...data.filtersRaw]
        this.$nextTick(function() {
          this.$refs.tableRefs3.initTableData()
        })
      },

      // aabbcc({row, rowIndex}) {
      //   row.index123 = rowIndex
      // },
      // 合并行或列的计算方法	
      tableSpanMethod({ row, column, rowIndex, columnIndex }){
        // console.log( row, column, rowIndex, columnIndex )
      },
      // 主表格点击
      rowClickHandel(data) {
        // this.$refs.tableRefs.clearSelection()
        // this.$refs.tableRefs.toggleRowSelection(data.row, true)
        
        this.$refs.tableRefs.clearSelection()
        this.$nextTick(() => {
          this.$refs.tableRefs.toggleRowSelection(data.row, true)
          // this.singleSelected = [row]
          // this.detailOrderId = (row && row.id) || ''
        })
      },
      // 查看详情
      jumpDetail(row) {
        this.$router.push({ path: '/OrgTree'})
      },
      // 复选框操作
      selectionChangeHandel(val) {
        this.tableSelected = val
      console.log('多选', val)
      },
      // 组合查询确认
      combineChange(data) {
        console.log(data, '******组合查询******')
      },
      btnOperate(flag) {
        console.log(this.tableSelected)
      },
      // 树形节点点击
      treeNodeClick(data1, data2, data3) {
        console.log(data1)
        console.log(data2)
        console.log(data3)
      },
      // 点击树形添加按钮
      addClick(data) {
        console.log(data)
      },
      // 展开树形
      treeShowHide(data) {
        console.log(data)
      },
      // 行内编辑只改变时
      editChange(row, feild) {
        console.log(row[feild],'---')
      },
      // 点击行内picklist
      pickListClick(row,columnName) {
        if(columnName === 'userName') {
          this.$alert('改变字段userName', '不同的自定义操作修改字段值', {
            confirmButtonText: '确定',
            callback: action => {
              this.$refs.tableRefs.setEditValue(`字段名${columnName}`)
            }
          })
        }
        if(columnName === 'email') {
          this.$alert('改变字段email', '不同的自定义操作修改字段值', {
            confirmButtonText: '确定',
            callback: action => {
              this.$refs.tableRefs.setEditValue(`字段名${columnName}`)
            }
          })
        }
      },
      searchChangeHandle(val){
        console.log('searchChange',val)
      },
      seachFieldChangeHandle(val){
        console.log('searchFieldChange',val)
      },
      handleToggleAllSelection(){
        this.$refs.tableRefs.toggleAllSelection()
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    },
  }
</script>

<style lang="scss" scoped>
  #custom-table{
    display: flex;
    justify-content: space-between;
    font-size: 12px;

    .right-content{
      min-width: calc(100%);
    }
  }
</style>
